<template>
  <div class="modelscontainer">
    <!-- 模型搜索栏 -->
    <div class="subcontainer1">
      <div class="searchcontainer">
        <div class="model_research">
          <input
            type="text"
            autocomplete="false"
            placeholder="请输入内容"
            class="model_research_input"
            v-model="input"
            style="font-size: 16px"
          />
          <el-button
            type="primary"
            icon="el-icon-search"
            style="border-top-left-radius: 0px;border-bottom-left-radius: 0px;background-color: #1479d7;font-size: 16px;}"
            >搜索</el-button
          >
        </div>
        <el-button
          type="primary"
          style="margin-left: 10px; background-color: #1479d7; font-size: 16px"
          @click="showModelRegister = !showModelRegister"
          >模型注册</el-button
        >
      </div>
    </div>
    <!-- 模型展示栏 -->
    <div class="subcontainer2">
      <div class="modelcardcontainer">
        <!-- <div class="mask"></div> -->
        <div class="modelcard" v-for="(item, index) in modellist" :key="index">
          <div class="top-section">
            <img :src="item.img" alt="" />
            <div class="name">
              <span>{{ item.name }}</span>
              <!-- <i class="fas fa-lock" v-show="!item.availably"></i>
              <i class="fas fa-unlock-alt" v-show="item.availably"></i> -->
            </div>
          </div>
          <div class="info-section">
            <h2>
              About
              <div class="border"></div>
            </h2>
            <div class="about-txt">
              <p>
                {{ item.description }}
              </p>
            </div>

            <h2>
              contact
              <div class="border"></div>
            </h2>
            <div class="s-m">
              <div class="contact-info">
                <a href="" class="fas fa-user-alt"></a>
                <p>贡献者：</p>
                <div class="contactname">{{ item.contributor }}</div>
              </div>
              <div class="contact-info">
                <a href="" class="fas fa-envelope"></a>
                <p>邮箱：</p>
                <div class="contactname">{{ item.email }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 模型注册栏 -->
    <div class="hoverCard" v-drag v-show="showModelRegister">
      <div class="title">
        <i class="fas fa-tools"></i>
        <p>模型注册</p>
      </div>
      <div class="content">
        <div class="content-item">
          <label for="name">名称:</label>
          <el-input
            id="name"
            v-model="model.name"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="content-item">
          <label for="description">描述:</label>
          <el-input
            id="description"
            v-model="model.description"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="content-item">
          <label for="url">模型服务:</label>
          <el-input
            id="url"
            v-model="model.url"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="content-item">
          <label for="url">配置文件:</label>

          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              上传模型配置文件，且不超过500kb
            </div>
          </el-upload>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import "../assets/css/models.css";
import drag from "../assets/js/drag.js";
import { config } from "../plugins/config.js";
export default {
  data() {
    return {
      useInfo: JSON.parse(localStorage.getItem("user")),
      input: "",
      showModelRegister: false,
      model: {
        name: "",
        availably: true,
        url: "",
        contributor: "",
        img: "",
        email: "",
        description: "",
      },
      modellist: [
        {
          name: "HBV模型",
          availably: true,
          contributor: "张佳鹏",
          img: "/modelImg/hbv.png",
          email: "zhangsansa@163.com",
          description:
            "HBV水文模型Hydrologiska Fyrans Vattenbalans modell, 瑞典水利气象研究中心于七十年代开发的用于河流流量预测和河流污染物传播的电水文模型。该模型目前在北欧地区被广泛应用于水电站发电量预测，大坝安全设计等。",
        },
        {
          name: "新安江模型",
          availably: true,
          contributor: "张佳鹏",
          img: "/modelImg/xaj.png",
          email: "zhangsansa@163.com",
          description:
            "新安江模型是华东水利学院(现河海大学)赵人俊教授团队提出的一个水文模型，是中国少有的一个具有世界影响力的水文模型。新安江模型是集总式水文模型（划分子流域时成为分散式水文模型），可用于湿润地区与半湿润地区的湿润季节。",
        },
        {
          name: "VIC模型",
          availably: false,
          contributor: "张佳鹏",
          img: "/modelImg/vic.png",
          email: "zhangsansa@163.com",
          description:
            "VIC模型是一种基于SVATS（Soil Vegetation Atmospheric Transfer Schemes）思想的大尺度分布式水文模型。Stamm等人最初构建VIC模型时，把土壤分为两层，习惯上称之为VIC-2L模型。",
        },
        {
          name: "CREST模型",
          availably: false,
          contributor: "黄赛男",
          email: "huangsaina@163.com",
          img: "/modelImg/CREST.png",
          description:
            "CREST（Coupled Routing and Excess STorage model）由俄克拉荷马大学和美国宇航局SERVIR联合开发，是一种分布式水文模型，旨在通过单元间模拟模拟地表以及地下水通量和储水的空间和时间变化。",
        },
      ],
    };
  },
  mounted() {
    const _this = this;
    _this.modellist = [];
    axios.post(config.ip + "getModels", this.useInfo.id).then((resp) => {
      let respData = resp.data;

      for (let index = 0; index < respData.length; index++) {
        let modelItem = {};
        const element = respData[index];
        modelItem.name = element.modelInfo.name;
        modelItem.contributor = element.userInfo.name;
        modelItem.img = config.ip + element.modelInfo.img;
        modelItem.email = element.userInfo.email;
        modelItem.description = element.modelInfo.description;
        _this.modellist.push(modelItem);
      }

      // console.log(resp.data);
    });
  },
};
</script>